<style scoped>
    @import '../styles/user.css';


    .m-user-bar h1 {
        text-align: center;
        color: #494949;
    }
    .w-bar {
        padding: 0;
        border: none;
        margin-bottom: 0px;
    }
    .w-bar select {
        color:#494949
    }
    .m-user-bar {
        border-radius: 18px 18px 0 0;
        background: #fffdfd;
    }
    .m-user-bar .name,.m-user-bar .phone {
        width: 50%;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        float: left;
        padding-left: 3px;
    }
    .m-user-bar .address {
        padding-left: 3px;
    }
    .address-choose .w-bar-control {
        width: 33.3%;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        float: left;
    }
    .address-save {
        background: #0fc977;
        color: #fff;
    }
    .address-save button {
        width:100%;
        height: 46px;
        line-height: 46px;
        text-align: center;
        color:#fff;
        font-size: 16px;
        letter-spacing: 2px;
    }

    .page-user .m-user-link {
        position: inherit;
    }
</style>

<template>
    <div class="page-wrap page-user" id="page-win-detail">
        <div class="m-user" id="winMain" v-show="!isEditAddress">
            <header-component :page-name="pageName"></header-component>
            <div class="m-user-winDetail">
                <div class="status">
                    <div class="m-user-winDetail-hd">商品状态</div>
                    <div class="m-user-progress">
                        <div class="m-user-progress-item over">
                            <div class="txt">获得商品</div>
                            <div class="aside"><!-- 2016-01-06 22:24 --></div>
                            <div class="bdr"></div>
                            <div class="dot"></div>
                        </div>

                        <template v-if="!!status&&status!='afterDelivery'">
                            <div class="m-user-progress-item over">
                                <div class="txt">确认收货地址</div>
                                <div class="aside"><!-- 2016-01-06 22:43 --></div>
                                <div class="cont"></div>
                                <div class="bdr"></div>
                                <div class="bdr bdr-expand"></div>
                                <div class="dot"></div>
                            </div>
                        </template>

                        <template v-else>
                            <div class="m-user-progress-item on bg expand">
                                <div class="txt txt-impt"><strong>确认收货地址</strong></div>
                                <div class="cont" id="addrCont">
                                    <template v-if="!isDefault">
                                        <div class="m-user-addrList">
                                            <div class="item default selected">
                                                <div class="name">{{data.consignee}}</div>
                                                <div class="mobile">{{data.mobile}}</div>
                                                <div class="detail">{{data.address}} {{data.street}}</div>
                                            </div>
                                        </div>
                                        <div class="opt">
                                            <button class="w-button w-button-main w-button-s" id="winCheckAddr" @click="editAddress">修改地址</button>
                                        </div>
                                    </template>

                                    <template v-else>


                                        <template v-if="!!data.address">
                                            <div class="m-user-addrList">
                                                <div class="item default selected">
                                                    <div class="name">{{data.consignee}}</div>
                                                    <div class="mobile">{{data.mobile}}</div>
                                                    <div class="detail"><span class="m-user-link dftTag">[默认]</span> {{data.address}} {{data.street}}</div>
                                                </div>
                                            </div>

                                            <div class="opt" v-show="isSureAddr">
                                                <button class="w-button w-button-main w-button-s" id="winAddrSure" @click="addrSure" :data-addrid="data.id">确认</button>
                                                <button class="w-button w-button-gray w-button-s" id="winCheckAddr" @click="editAddress">使用其他</button>
                                            </div>
                                        </template>

                                        <template v-else>
                                            <p>您还没有收货地址哦～</p>
                                            <button class="w-button w-button-main w-button-s" @click="editAddress" id="winNoAdd">填写地址</button>
                                        </template>
                                    </template>
                                </div>
                                <div class="bdr"></div>
                                <div class="bdr bdr-expand"></div>
                                <div class="dot"></div>
                            </div>
                        </template>
                        <div :class="['m-user-progress-item',status == 'afterDelivery'?'on':'',status == 'afterDelivery'?'wait':'',status == 'toconfirm'||status == 'completed'?'over':'']">
                        <div class="txt">商品派发</div>
                 <div class="aside" v-if="status == 'afterDelivery'">等待发货</div>
                        <div class="bdr"></div>
                        <div class="dot"></div>
                    </div>
                    <div :class="['m-user-progress-item',status == 'toconfirm'?'on':'',status == 'toconfirm'?'wait':'',status == 'completed'?'over':'']">
                    <div class="txt">确认收货</div>
                    <div class="aside" v-if="status == 'toconfirm'"><button class="w-button w-button-main w-button-s" id="winReceipt" @click="winReceipt">确认收货</button></div>
                    <div class="bdr"></div>
                    <div class="dot"></div>
                </div>
                <div :class="['m-user-progress-item',status == 'completed'?'on':'',status == 'completed'?'wait':'']">
                <div class="txt">完成</div>
                <div class="aside"></div>
                <div class="bdr"></div>
                <div class="dot"></div>
            </div>
        </div>
    </div>
    <div id="buyUserInfo">
        <template v-if="!!status">
            <div class="m-user-winDetail-hd">收货信息</div>
            <div class="m-user-addrList">
                <div class="item">
                    <div class="name">{{data.consignee}}</div>
                    <div class="mobile">{{data.mobile}}</div>
                    <div class="detail">{{data.address}} {{data.street}}</div>
                </div>
            </div>
        </template>

    </div>
    <div class="m-user-winDetail-hd">商品信息</div>
    <ul class="w-goodsList w-goodsList-l m-user-goodsList">
        <li class="w-goodsList-item">
            <div class="w-goods w-goods-l w-goods-ing m-user-goods">
                <div class="w-goods-pic">
                    <a href="javascript:;">
                        <img :src="data.goods.img" class="">
                    </a>
                </div>
                <div class="w-goods-info">
                    <p class="w-goods-title f-txtabb"><a href="javascript:;" >{{data.goods.name}}</a></p>
                    <p class="w-goods-price">总需：{{data.goods.totalNeed}} 人次</p>
                    <p class="w-goods-period">期号：{{data.goods.periods}}</p>
                    <p class="m-user-goods-code">幸运号码：<span class="txt-impt">{{data.goods.lucklyNumber}}</span></p>
                    <p class="m-user-goods-time">本期参与：{{data.goods.userBuyCount}}人次</p>
                    <p class="m-user-goods-time">揭晓时间：{{data.goods.endtime}}</p>
                </div>
            </div>
        </li>
    </ul>
    </div>
    </div>
    <div class="m-user m-user-addrList-choose " id="winAddList" v-show="isEditAddress" >
        <div class="m-simpleHeader " >
            <a href="javascript:;" style="display:none;" class="m-simpleHeader-back"><i class="ico ico-back"></i></a>
            <a href="javascript:;" style="display: block;" class="m-simpleHeader-back" data-hide="#winAddList" data-show="#winMain" @click="isEditAddress=false">取消</a>
            <a href="javascript:;" class="m-simpleHeader-ok" id="winAddAddrBtn" @click="statusAddress=true">新增</a>
            <h1>选择收货地址</h1>
        </div>

        <div class="m-user-addrList" id="winAddrList">
            <div class="item" v-if="addrList==''" style="text-align: center;padding-top: 20px;">
                暂无地址,请先新增地址
            </div>
            <div :class="['item',!!i.default?'default':'',i.id==addrId?'selected':'']" v-for="(k,i) in addrList" :data-id="i.id" @click="addrId=i.id">
                <div class="name">{{i.consignee}}</div>

                <div class="mobile">{{i.phone}}</div>

                <div class="detail"><span v-if="!!i.default" class="m-user-link dftTag">[默认]</span> {{i.province}} {{i.city}} {{i.area}} {{i.address}}</div>
            </div>
        </div>

        <div style="display: block; text-align: center; padding: 20px 0px;">

            <button class="w-button w-button-main w-button-l" style="width: 90%;" id="winAddrBtn" data-hide="#winAddList" data-show="#winMain" @click="addrSure">确认选择</button>
        </div>
    </div>

        <address-pop :status-address="statusAddress" v-if="statusAddress"></address-pop>
        <pop :msg="msg" :status-toast="statusToast"></pop>
    </div>

</template>

<script>

    import headerComponent from '../components/header'
    import addressPop from '../components/addressPop'
    import pop from '../components/pop'
    import User from '../module/user'

    module.exports = {

        data() {

            return {
                data:{},
                status:'',
                id:'',
                pageName:'中奖纪录',
                addrList: [],
                addrObj: {},
                addrId: '',
                isCheckAddr:false,
                statusAddress:false,
                isEditAddress:false,
                msg:'',
                statusToast:false,
                isSureAddr:false,
                isDefault:false
            }
        },
        components: {

            headerComponent,
            addressPop,
            pop

        },

        created(){

            this.$dispatch('isLoading',true);

        },

        async ready() {


            if (!!this.$route.query.id) {

                this.id = this.$route.query.id;

            } else {

                history.go(-1)

            }

            let res = await User.getWinDetail(this.id);

            if (res.status == 200 && res.data) {

                if (!!res.data.consignee) {

                    this.isCheckAddr = true;

                }

                this.data = Object.assign({},this.data,res.data);

                this.status = res.data.status;

                if (!res.data.status) {

                    let addres = await User.getDefaultAddress();

                    if (addres.status == 200 && !!addres.data && !!addres.data.item.length > 0) {

                        this.data =  Object.assign({},this.data,addres.data.item[0]);

                        this.addrId = addres.data.item[0].id;

                        this.isDefault = true;

                        this.isSureAddr = true;

                    }
                }
            }


            this.$dispatch('isLoading',false);

        },

        beforeDestroy() {

        },

        methods: {

            async editAddress(){

                let res = await User.getAddress();

                console.log(res);

                if (res.status == 200) {

                    if (!!res.data && !!res.data.item && res.data.item.length > 0) {

                        this.addrList.splice(0,this.addrList.length);

                        this.addrList.push(...res.data.item);



                    } else {

                    }
                }
                this.isEditAddress = true;

            },

            async addrSure(){

                if (!!this.addrId) {

                    let res = {};

                    if (this.isCheckAddr) {

                         res = await User.updateGoodsSendAddr(this.id,this.addrId);

                    } else {

                        res = await User.addGoodsSendAddr(this.id,this.addrId);

                    }

                    if (res.status == 200 && res.data) {

                        this.statusToast = true;

                        this.msg = '地址提交成功';

                        this.data = Object.assign({},this.data,res.data);

                        this.isEditAddress = false;

                        this.isSureAddr = false;

                    } else {

                        this.statusToast = true;

                        this.msg = '提交失败';

                    }

                } else {

                    this.statusToast = true;

                    this.msg = '请选择地址'

                }


            },

            async winReceipt(){

                let res = await User.confirmGetGoods(this.id);

                if (res.status == 200 && !!res.data) {

                    this.statusToast = true;

                    this.msg = '成功收货'

                    this.status = 'completed'

                } else {

                    this.statusToast = true;
                    this.msg = '提交失败请重试'

                }

            }

        },

        events:{

            updateAddressList(id){

                this.editAddress();

            }

        }


    }
</script>
